<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药品单位</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style>
    </style>
</head>
<body>
<div class="layui-main">
    <blockquote class="layui-elem-quote">列表</blockquote>

    <!-- 添加按钮 -->
    <a class="layui-btn layui-btn-sm" id="add-btn">添加</a>
    <!-- 信息表 -->
    <table id="tbl" lay-filter="tbl"></table>
    <script type="text/html" id="tbl-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <!-- 添加弹出层 -->
    <div id="add-layer" style="display: none; padding: 20px">
        <form id="add-form" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">药品编号</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="unitid" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品单位</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="unitname" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="notes" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add-form-submit">添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 修改弹出层 -->
    <div id="update-layer" style="display: none; padding: 20px">
        <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
            <div class="layui-form-item">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="id" class="layui-input" lay-verify="required" disabled>
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品编号</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="unitid" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">药品单位</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="unitname" class="layui-input" lay-verify="required">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="notes" class="layui-input" lay-verify="required" autocomplete="off">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="update-form-submit">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
<script>
        layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
        elem: '#tbl',
        url: '/unit/selectAll',
        method: 'get',
        initSort: { //排序
        field: 'account' //排序字段，对应 cols 设定的各字段名
        , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
    },
        cols: [[
    {field: 'id', title: 'ID'},
    {field: 'unitid', title: '药品编号', },
    {field: 'unitname', title: '药品单位'},
    {field: 'notes', title: '备注'},

    {toolbar: '#tbl-toolbar', title: '操作',width:161}
        ]],
        page: {
        limit: 5,//指定每页显示的条数
        limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
    }//开启分页

        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
        var result;
        if (this.page.curr) {
        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
    } else {
        result = res.data.slice(0, this.limit);
    }
        return {
        "code": res.code, //解析接口状态
        "msg": res.msg, //解析提示文本
        "count": res.count, //解析数据长度
        "data": result //解析数据列表
    };
    },
        // 表格容器id，用于表格重载
        id: 'tbl'
    });
        var AddIndex;
        // 显示添加弹出层
        $('#add-btn').click(function () {
        // 每次显示前重置表单
        $('#add-form')[0].reset();
        AddIndex = layer.open({
        type: 1,
        title: '添加',
        skin: 'layui-layer-molv',
        area: ['500px'],
        content: $('#add-layer')
    });
    });

        // 添加表单提交
        form.on('submit(add-form-submit)',function (data) {
        // ajax方式添加
        console.log(data.field)
        $.ajax({
        url: "/unit/insert",
        type: "get",
        data: data.field,
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {

        console.log(data)
        if (data.status === 1) {
        layer.close(AddIndex);
        layer.msg('添加成功');
        table.reload('tbl');
    } else {
        layer.msg('添加失败');
    }
    },
        error: function () {
        console.log("ajax error");
    }
    });
        // 阻止表单跳转
        return false;
    });
        table.on('tool(tbl)', function (obj) {
        // 获取当前行数据和lay-event的值
        var data = obj.data;
        var event = obj.event;
        // 删除事件
        if (event === 'del') {
        layer.confirm('确定删除该吗？', function (index) {
        // ajax方式删除
        console.log(data.id)
        $.ajax({
        url: '/unit/' + data.id,
        type: "GET",
        dataType: 'json',
        success: function (data) {
        if (data.status === 1) {
        layer.msg('删除成功');
        table.reload('tbl');
    } else {
        layer.msg('删除失败');
    }
    },
        error: function () {
        console.log("ajax error");
    }
    });
        layer.close(index);
    });
    }
        var UpIndex;
        // 修改数据回显
        if (event === 'edit') {
        // 表格数据回显
        form.val('update-form', {
            "id": data.id,
            "unitid":data.unitid,
            "unitname":data.unitname,
            "notes":data.notes
    });
        // 显示修改表单的弹出层

        UpIndex= layer.open({
        type: 1,
        title: '更新信息',
        skin: 'layui-layer-molv',
        area: ['500px'],
        content: $('#update-layer')
    });
        // 修改表单提交
        form.on('submit(update-form-submit)',function (data) {
        console.log(data.field)
        // ajax方式修改
        $.ajax({
        url: "/unit/update",
        type: "get",
        data: data.field,
        contentType: 'application/json',
        dataType: 'json',
        success: function (data) {
        if (data.status === 1) {
        layer.close(UpIndex);
        layer.msg('更新成功');
        table.reload('tbl');
    } else {
        layer.msg('更新失败');
    }
    },
        error: function () {
        console.log("ajax error");
    }
    });
        // 阻止表单跳转
        return false;
    });
    }
    });
    })
</script>


</body>
</html>